<template>
  <div class="info-page">
    <form @submit="save">
      <van-cell-group title="基础信息">
        <van-cell title="头像" class="van-cell--avatar">
          <button
            class="avatar-img-wrap"
            open-type="chooseAvatar"
            @chooseavatar="setAvatar"
          >
            <img :key="form.headUrl" class="avatar-img" :src="form.headUrl" />
          </button>
        </van-cell>
        <van-field
          v-model="form.nickName"
          name="nickname"
          label="昵称"
          type="nickname"
          placeholder="请输入"
        />
        <van-field
          v-model="form.username"
          name="username"
          label="用户名"
          type="username"
          placeholder="请输入"
        />
        <picker :range="sexOptions" @change="onSexChange">
          <van-field
            :value="form.sex"
            name="sex"
            label="性别"
            placeholder="请选择"
            right-icon="arrow"
            readonly
          />
        </picker>
        <van-field
          v-model="form.mobile"
          name="mobile"
          label="电话"
          type="number"
          placeholder="请输入"
        />
        <!-- <picker mode="date" @change="onDateChange">
          <van-field
            v-model="form.birthday"
            name="birthday"
            label="生日"
            placeholder="请选择"
            right-icon="arrow"
            readonly
          />
        </picker> -->
      </van-cell-group>

      <fixed-bottom text="保存" native-type="submit" />
    </form>
  </div>
</template>

<script>
import { CellGroup, Cell, Button } from "vant";
import VanField from "@/components/VanField";
import FixedBottom from "@/components/FixedBottom";
import { updateUser } from "@/api";
import { cloneDeep } from "lodash-es";
import { mapGetters } from "vuex";
import { uploadFile } from "@/api";

export default {
  components: {
    FixedBottom,
    VanField,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      sexOptions: ["男", "女"],
      form: {
        value: "",
        drugs: [
          { name: "", count: "" },
          { name: "", count: "" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["user"])
  },
  onLoad() {
    this.form = cloneDeep(this.user);
  },
  methods: {
    async setAvatar(e) {
      const { avatarUrl } = e.detail;
      if (avatarUrl) {
        const [url] = await uploadFile(avatarUrl);
        this.form.avatar = url;
      }
      console.log(e, "avatar");
    },
    save(e) {
      if (e.detail.value.nickname) {
        this.form.nickname = e.detail.value.nickname;
      }
      if (!this.form.nickName) {
        this.showMsg("昵称不能为空");
        return;
      }
      if (!this.form.username) {
        this.showMsg("用户名不能为空");
        return;
      }
      if (!this.form.mobile) {
        this.showMsg("手机号不能为空");
        return;
      }
      updateUser(this.form).then(res => {
        this.showMsg("保存成功", "success");
        this.$store.commit("setUser", cloneDeep(this.form));
      });
    },
    addDrug() {
      this.form.drugs.push({
        name: "",
        count: ""
      });
    },
    removeDrug(index) {
      this.form.drugs.splice(index, 1);
    },
    onSexChange(e) {
      this.form.sex = this.sexOptions[e.detail.value];
    },
    onDateChange(e) {
      this.form.birthday = e.detail.value;
    }
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
